<template>
    <div>
         <transition
            @before-enter= "beforeEnter"
            @enter= "enter" 
            @after-enter= "afterEnter"
            name="ball"
            >
                <div ref="ball" id="ball" v-if="flag" style="width:20px; height:20px; border-radius:50%;background-color:red; position:absolute;z-index:100;"></div>
            </transition>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipe class="img"  :imgs='goodImgs'></swipe>
                </div>
            </div>
        </div>
        <div class="mui-card">
				<div class="mui-card-header">{{goods.name}}</div>
				<div class="mui-card-content goods-shop-info">
					<div class="mui-card-content-inner ">
						<div class="mb10"> 
                            市场价格:<span style="text-decoration:line-through">￥{{goods.new_price}}</span>
                            <span style="margin-left: 10px;">销售价:</span>
                            <span style="color:red;font-weight:bolder; ">￥{{goods.old_price}}</span>
                        </div>
                        <div class="mb10">购买数量:
                            <div id="goods-count" class="mui-numbox" data-numbox-min='1' data-numbox-max='9' >
                                <button class="mui-btn mui-btn-numbox-minus" type="button" @click="jian">-</button>
                                <input id="test" ref="input" class="mui-input-numbox" type="number" value="1" />
                                <button class="mui-btn mui-btn-numbox-plus" type="button" @click="jia">+</button>
                            </div>
                        </div>
                        <div>
                            <mt-button class="goods-shop-btn" size="small" type="primary">立即购买</mt-button>
                            <mt-button class="goods-shop-btn" id="addbtn" size="small" type="danger" @click.self="addGoods">
                                加入购物车
                            </mt-button>
                        </div>
					</div>
				</div>
				
			</div>
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner goods-span">
						<div><span>商品货号：{{goods.id}}</span></div>
                        <div><span>库存情况：{{goods.left_count}}件</span></div>
                        <div><span>上架时间：{{goods.time}}</span></div>
					</div>
				</div>
				<div class="mui-card-footer goods-info-botton ">
                    
                    <mt-button class="goods-info-botton-one"  type="primary" size="large" plain @click="abb('/HomePage/buy/goodsphoto')">图文介绍</mt-button>
                    
                    
                    <mt-button class="goods-info-botton-one" type="danger" size="large" plain @click="abb('/HomePage/buy/goodscomment')">商品评论</mt-button> 
                    
                </div>
			</div>
    
    </div>
    
</template>  

<script>
import swipe from '../subcomponents/Swipe.vue'
import mui from '../../../lib/MUI/js/mui.min.js'
export default {
    data(){
        return{
            flag:false,
            goods:"",
            goodImgs:"",
            
        }
    },
    
    components:{
        swipe
    },

    created(){
        
        mui("#goods-count").numbox();
        this.goods=this.$route.params.option;
        if(!this.goods){
            this.goods=JSON.parse( localStorage.getItem('option'));
        }
        var id=this.goods.id;
        this.$http.post('http://192.168.0.197:88/getImgs',{belongId:""+id},{emulateJSON:true})
        .then(res=>{
            this.goodImgs=res.body.data;
            console.log(this.goodImgs)
        },data=>{
            console.log(data)
        })
    },
    methods:{
        jia(){
            if(this.$refs.input.value<9)
            this.$refs.input.value++;
        },
        jian(){
            if(this.$refs.input.value>1)
            this.$refs.input.value--;
        },
		abb(a){        
            let belongid=this.goods.id
            localStorage.setItem('option',JSON.stringify(this.goods));
			this.$router.push({path:a,params:{belongid}})
		},
        addGoods(){
            this.flag = true;
            localStorage.setItem('flag',true) 
            setTimeout(()=>{
               let tmp= this.$refs.input.value;
                this.$store.commit('add',this.$refs.input.value);
                this.$store.commit('addCart',this.goods);
            },1000);
            this.$http.post('http://192.168.0.197:88/addToCar',{belongId:localStorage.getItem('usernumber'), goodsId:this.$route.params.option.id,count:this.$refs.input.value},{emulateJSON:true})
            .then(res=>{
                console.log(res.body.data)
                console.log(this.$route.params.option.id)
            })

        
           
        
        },
        beforeEnter(el){
            // this.flag = !this.flag;
            el.style.transform = "translate(0,0)"

        },
        enter(el,done){
            el.offsetWidth;
            // const ballposition = document.getElementById("ball");
            const addBtn = document.getElementById("addbtn").getBoundingClientRect();
            // console.log(addBtn)
            // console.log(ballposition)
            // ballposition.style.left = addBtn.left;
            // ballposition.style.top = addBtn.top;
            el.style.transform = `translate(${addBtn.left + 30}px, ${addBtn.top - 60}px)`
            const endPosition = document.getElementById("end").getBoundingClientRect();
            // // console.log(ballposition)
            // console.log(endPosition)
            const xDist = endPosition.left - addBtn.left + 30  ;
            const yDist = endPosition.top - addBtn.top - 60;
            // console.log(xDist)
            // console.log(yDist)
            el.style.transform = `translate(${addBtn.left + xDist - 20}px,${addBtn.top + yDist}px)`;
            el.style.transition = "all 1s cubic-bezier(1,-0.67,.56,1.09)";
            done()
        },
        afterEnter(el){
            this.flag = !this.flag
        },
    }
}
</script>

<style scoped>

    .mui-card-header{
        font-weight: bolder
    }
    .goods-shop-info{
        font-size: 12px
    }
    .mui-numbox{
        height: 24px!important;
    }
    .goods-shop-btn{
        height: 27px!important;
    }
    .goods-span span{
        color: #aaa;
        font-size: 12px;
    }
    .goods-info-botton{
        display: flex;
        flex-direction: column;
    }
    .goods-info-botton-one{
        margin:6px 0;
        height: 30px!important;
        font-size: 13px;
        

    }
</style>